<template>
  <div class="div">
    <div class="box animated bounceInLeft">
      <el-form
        label-position="left"
        :model="InfoForm"
        status-icon
        :rules="Inforules"
        ref="InfoForm"
        label-width="60px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="name">
          <el-input v-model="InfoForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="radio" label="男" @change="changesex">男</el-radio>
          <el-radio v-model="radio" label="女" @change="changesex">女</el-radio>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="InfoForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="InfoForm.phone"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button type="primary" @click="submit" class="submit animated bounce"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      InfoForm: {
        id: "",
        name: "",
        email: "",
        sex: "",
        age: "",
        phone: "",
      },
      radio: {},
      //  年龄
      options: [
        {
          value: "15",
          label: "15岁",
        },
        {
          value: "16",
          label: "16岁",
        },
        {
          value: "17",
          label: "17岁",
        },
        {
          value: "18",
          label: "18岁",
        },
        {
          value: "19",
          label: "19岁",
        },
        {
          value: "20",
          label: "20岁",
        },
        {
          value: "21",
          label: "21岁",
        },
        {
          value: "22",
          label: "22岁",
        },
        {
          value: "23",
          label: "23岁",
        },
        {
          value: "24",
          label: "24岁",
        },
        {
          value: "25",
          label: "25岁",
        },
        {
          value: "26",
          label: "26岁",
        },
        {
          value: "27",
          label: "27岁",
        },
      ],
      value: "",
    };
  },
  methods: {
    submit() {
      this.InfoForm.age = this.value;
      this.InfoForm.id = window.sessionStorage.getItem("token");
      this.$http.post("students/perfect", this.InfoForm).then((res) => {
        console.log(res.data);
      });
    },
    changesex() {
      // console.log(this.radio);
      this.InfoForm.sex = this.radio;
    },
  },
};
</script>
<style scoped>
.box {
  width: 500px;
  padding-bottom: 50px;
  /* background-color: rgba(170, 168, 168, 0.4); */
  border-radius: 10px;
  margin: 20px auto;
  overflow: hidden;
  /* text-align: center; */
}
.el-form {
  width: 348px;
  /* background-color: rgba(97, 94, 94, 0.4); */
  margin: 20px auto;
}
.btn {
  /* width: 100%; */
  text-align: center;
}
.submit {
  border: none;
  /* width: 100px; */
  background-color: rgba(0, 0, 0, 0.4);
}
.submit:active,
.submit:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
<style></style>
